<template>
    <div>
            <div class="crumbs">
                <el-breadcrumb separator="/">
                    <el-breadcrumb-item><i class="el-icon-date"></i> 用户列表</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        <el-col :span="24" class='actions-top'>
            <el-button type='danger'  :disabled='batch_flag' icon='delete' @click='onDeleteUser(true)'>删除选中</el-button>
            <el-form :inline="true"  class="demo-form-inline">
                <el-form-item>
                    <el-input placeholder="姓名" clear></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="default" >查询</el-button>
                </el-form-item>
            </el-form>
        </el-col>
            <el-table :data="userList" border style="width: 100%" :default-sort = "{prop: 'date', order: 'descending'}" tooltip-effect="dark" @selection-change="handleSelectionChange" :row-class-name="tableRowClassName">
                <el-table-column type="selection" width="70"></el-table-column>
                <el-table-column prop="Id" label="ID" sortable width="120"></el-table-column>
                <el-table-column label="头像" width="120" height="100">
                    <template scope="scope">
                        <img width="50" v-bind:src="scope.row.avatar" height="50" />
                    </template>
                </el-table-column>
                <el-table-column prop="userName" label="用户名" sortable></el-table-column>
                <el-table-column prop="addTime" label="注册时间" sortable></el-table-column>
                <el-table-column label="操作">
                    <template scope="scope">
                        <el-button
                                size="small"
                                @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button
                                size="small"
                                type="danger"
                                @click.native.prevent="onDeleteUser(scope.row,scope.$index,userList)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        <div class="block">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :page-size="2"
                    layout="total, prev, pager, next"
                    :total="num">
            </el-pagination>
        </div>
        </div>
</template>
<style>
    .block{
        margin-top: 10px;
        float: right;
    }
    .el-table .info-row {
        background: #c9e5f5;
    }
    .el-table .positive-row {
        background: #e2f0e4;
    }
    .actions-top{
        height: 46px;
    }
    .demo-form-inline {
        display: inline-block;
        float: right;
    }
</style>
<script>
    import qs from 'qs'
    export default {
        data() {
            return {
                num:0,
                batch_flag: true,
                user_id: '', //批量删除时这是多个用逗号隔开的id字符串
                userList: [], //用户列表数组
                multipleSelection: []
            }
        },
        methods: {
            /**
             * 获取用户信息
             */
            getList(page=1){
                this.$http.get(this.ApiServer.api.user,{params: {pageNo:page}},{
                    header:{
                        'Authorization':'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOjE3LCJpc3MiOiJodHRwOlwvXC8xMjcuMC4wLjFcL2FwaVwvdjFcL2FkbWluXC9sb2dpbiIsImlhdCI6MTQ5MTk5Njk0NywiZXhwIjoxNDkyMDAwNTQ3LCJuYmYiOjE0OTE5OTY5NDcsImp0aSI6IlVmajFSU2xGQ3FYZzRSWWEifQ.2S9uTre6P4TM2DGZq394CuE93Bx2CUjrtLPo67OziUg'
                    }
                }).then((response) => {
                    this.num = response.data.body.num;
                    this.userList = response.data.body.userList;
                },(error)=>{
                    self.$message.error("失败");
                });
            },
            tableRowClassName(row, index) {
                if ((index+1)%4 === 0) {
                    return 'info-row';
                } else if ((index+3)%2 === 0) {
                    return 'positive-row';
                }
                return '';
            },
            formatter(row, column) {
                return row.address;
            },
            handleSelectionChange(val) {
               if(val.length){
                   let ids = [];
                   for(var i= 0 ; i < val.length ; i ++)
                   {
                       ids.push(val[i].ID);
                   }
                   this.user_id = ids.join(',');
                   this.batch_flag = false;
               }else{
                   this.batch_flag = true;
                   this.user_id = '';
               }
                this.multipleSelection = val;
            },
            handleEdit(index,rows) {
                console.log(rows.ID);
            },
            onDeleteUser(user,index,list){
                let id;
                if (user === true) {
                     id = this.user_id;
                } else {
                     id = user.Id;
                }
                this.$http.delete(this.ApiServer.api.user+'/'+id).then((response)=>{
                },(error)=>{
                    self.$message.error("删除用户失败");
                });
                if(user === true) {
                    this.userList = this.userList.filter(function(item, idx) {
                        return id.indexOf(item.ID) === -1;
                    })
                }else{
                    list.splice(index, 1);
                }
            },
            handleCurrentChange(val) {
                this.currentPage = val;

                this.getList(val);
            }
        },
        mounted(){
            this.getList(1);
        }
    }
</script>